<template>
<!-- 需要携带以下参数 -->
<!-- ref 用于获取组件触发API -->
<!-- auto-upload 关闭自动上传 -->
<!-- http-request 设置自定义上传的函数 -->
<!-- on-change 图片列表改变时触发的函数 -->
<!-- multiple 允许上传多个文件 -->
    <div>
        <el-upload
            ref="upload"
            :auto-upload="false"
            :http-request="uploadFile"
            :on-change="changeFileLength"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">点击上传文件</div>
        </el-upload>
    <!-- 上传时点击的按钮 -->
        <el-button @click="upload" type="success">开始上传</el-button>
    </div>
</template>

<script>
import { uploadcontent ,uploadnormal } from "@/api/demo/demo"

    export default {
        name: "uploadCT",
        data(){
            return{
                // 上传文件的列表
                uploadFiles: [],
                // 上传文件的个数
                filesLength: 0,
                // 上传需要附带的信息
                info:{
                    id:"我的附加ID",
                    name:"我的附加姓名",
                },
                key: 'my-secret-key030', // 密钥应存储在安全的地方
            }
        },

        methods:{
            // 修改当前文件列表长度
            changeFileLength(file, fileList){
                this.filesLength = fileList.length
                console.log("文件数量："+this.filesLength)
            },

            // 用户点击上传调用
            async upload(){
                // 触发上传 调用配置 :http-request="uploadFile"
                // 即触发 uploadFile函数
                await this.$refs.upload.submit();
                // 上传完成后执行的操作 ...
            },

            // 该函数还是会被调用多次
            // 每次param参数传入一个文件
            uploadFile(param){
                // 将文件加入需要上传的文件列表
                this.uploadFiles.push(param.file)
                // 当uploadFiles长度等于用户需要上传的文件数时进行上传
                if (this.uploadFiles.length == this.filesLength){
                    // 创建FormData上传
                    let fd = new FormData();
                    // 将全部文件添加至FormData中
                    this.uploadFiles.forEach(item => {
                        let reg = item.name.split('.').pop();
                        console.log("reg:"+ reg)
                        if(reg==="pdf"){
                            console.log("reg1:"+ reg)
                        // 调用转方法base64
                        this.getBase64(item)
                            .then((resBase64) => {
                            // console.log(resBase64)
                            //获取文件，不带data:application/pdf;base64, 前缀
                            var content = resBase64.split(",")[1];
                            fd.append('base64Content',content);
                            //获取文件名称
                            var fileName = item.name;
                            fd.append('fileName',fileName);
                            //调用上传接口
                            uploadbase64(fd).then(res => {
                            /*上传成功处理*/
                                }).catch(err => {/*报错处理*/});
                            })
                        .catch((err) => {
                            console.log(err);
                            });
                        }else{
                            var fileName = item.name;
                            fd.append('fileName',fileName);
                            fd.append('file',item);
                            //调用上传接口
                            uploadnormal(fd).then(res => {
                            /*上传成功处理*/
                                }).catch(err => {/*报错处理*/});
                        }
                    })
                }
            },
            getBase64(file) {
                return new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    let fileResult = "";
                    reader.readAsDataURL(file);
                    // 开始转码
                    reader.onload = () => {
                    fileResult = reader.result;
                    };
                    // 转码失败
                    reader.onerror = (error) => {
                    reject(error);
                    };
                    // 转码结束
                    reader.onloadend = () => {
                    resolve(fileResult);
                    };
                });
            },
        }
    }
</script>